<div class="modal-header">
  <div class="modal-title">设置【{{ record.username }}】角色</div>
</div>
<div nz-row [nzGutter]="8">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-card nzTitle="已配角色">
      <ul nz-list [nzDataSource]="userRoleList">
        @for (item of userRoleList; track $index) {
          <li nz-list-item nzNoFlex>
            <nz-list-item-meta>
              <nz-list-item-meta-description>
                @if (item.deleted) {
                  <nz-tag [nzColor]="'#f50'">已弃用</nz-tag>
                }
              </nz-list-item-meta-description>
              <nz-list-item-meta-title>
                {{ item.name }}
              </nz-list-item-meta-title>
            </nz-list-item-meta>
            {{ item.description }}
            <ul nz-list-item-actions>
              <nz-list-item-action><a (click)="deleteUserRole(item)" nz-button nzType="text" nzDanger>删除</a></nz-list-item-action>
            </ul>
          </li>
        }
      </ul>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <nz-card nzTitle="候选角色">
      <sf mode="search" [schema]="searchSchema" (formSubmit)="queryCandidate($event)" (formReset)="queryCandidate($event)" />
      <st
        #st
        [data]="page.records"
        [columns]="columns"
        (change)="change($event)"
        [pi]="page.current"
        [ps]="page.size"
        [total]="page.total"
        [page]="pagination"
      />
    </nz-card>
  </div>
</div>
<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <!-- <button nz-button type="submit" nzType="primary" (click)="save(sf.value)"
    [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button> -->
</div>
